<template>
    <div>
        <span>获取验证码({{time}}s)</span>
    </div>
</template>

<script lang="ts" setup>

    // 引入组合式API函数ref
    import { ref,watch } from "vue";
    // 倒计时的事件
    let time = ref<number>(5);

    // 接收父组件传递过来的props->flag:用于控制计数器组件显示与隐藏
    let props = defineProps(['flag']);
    let $emit = defineEmits(['getFlag']);

    // 监听父组件传递过来props数据变化
    watch(
        ()=>props.flag,
        ()=>{
            let timer = setInterval(()=>{
                time.value--;
                if(time.value==0){
                    // 通知父组件倒计时模式结束
                    $emit('getFlag',false);
                    //清除计时器
                    clearInterval(timer);
                }
            },1000);
        },
        {
            immediate:true
        }
        )
</script>

<style lang="scss" scoped>

</style>